<template>
	<view class="page-view">
		<nav-view :defaultShow="true"></nav-view>
		<view class="page-conte">
			<view class="title-h2">
				<image class="icon" src="../../static/images/title-ss.png" mode=""></image>
			</view>
			<view class="search-view-box">
				<view class="search-top-box is-flex">
					<i class="iconfont icon-jindunlogo-01"></i>
					<text class="name">金盾</text>
				</view>
				<view class="search-conte-box is-flex">
					<i class="iconfont icon-sousuo-01"></i>
					<input class="input" type="text" placeholder="请描述您的法律问题">
					<view class="search-btn">搜索</view>
				</view>
			</view>
			<!-- 搜索引导 -->
			<view class="search-list">
				<view class="search-item is-flex" v-for="(item,index) in list" :key="index" @click="touchSearch(item)">
					<i class="iconfont icon-sousuo-01"></i>
					<text class="conte u-line-1">{{item}}</text>
					<i class="iconfont icon-tiaozhuan-01"></i>
				</view>
			</view>
			
		</view>
		<u-loading-icon :show="false" color="#232DA7" text="Loading..." textSize="12" size="60" :vertical="true"></u-loading-icon>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				list:['AI作画生成的图片和作品，版权归谁','教育培训机构涉嫌诈骗该怎么办?',
				'葛优打“葛优躺”官司获赔759万，肖像权是什么','消费者权益有哪些','银行倒闭存款怎么办',
				'AI作画生成的图片和作品，版权归谁','教育培训机构涉嫌诈骗该怎么办?',
				'葛优打“葛优躺”官司获赔759万，肖像权是什么','消费者权益有哪些',
				'银行倒闭存款怎么办','AI作画生成的图片和作品，版权归谁',
				'教育培训机构涉嫌诈骗该怎么办?',
				'葛优打“葛优躺”官司获赔759万，肖像权是什么','消费者权益有哪些','银行倒闭存款怎么办'],
			}
			
		},
		methods:{
			click(){
				
			},
			touchDelete(){
				this.show = true
			},
			problemConfirm(){
				this.show = false
				console.log("确认")
			},
			touchSearch(){
				uni.navigateTo({
					url:'/pages/search/answer'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-conte {
		padding: 40upx;
	}
	.title-h2 .icon {
		width: 120upx;
		height: 86upx;
	}
	// 搜索框
	.search-view-box {
		width: 100%;
		z-index: 10;
		margin-top: 16upx;
	}
	.icon-yy {
		position: absolute;
		right: 0;
		bottom: 0;
		margin-bottom: -20upx;
		z-index: 12;
		width: 87upx;
	}
	.search-top-box {
		width: 169upx;
		height: 69upx;
		background: #232DA7;
		border-radius: 13upx 13upx 0upx 0upx;
		justify-content: center;
		font-size: 35upx;
		color: #fff;
		line-height: 50upx;
	}
	.search-top-box .iconfont {
		font-size: 50upx;
		margin-right: 5upx;
	}
	.search-conte-box {
		height: 106upx;
		border-radius: 0rpx 13rpx 13rpx 13rpx;
		border: 4rpx solid #232DA7;
		padding: 0 20upx 0 34rpx;
		background-color: #fff;
	}
	.search-conte-box .iconfont {
		font-size: 55upx;
	}
	.search-conte-box .input {
		flex: 1;
		padding-left: 30upx;
	}
	.history-search-box {
		margin-top: 50upx;
	}
	.title-view-box {
		padding: 0 35upx 0 40upx;
	}
	.title-view-box .title {
		width: 162upx;
		height: 58upx;
	}
	.title-view-box .delete {
		width: 30upx;
		height: 30upx;
	}
	.search-list {
		margin-top: 30upx;
	}
	.search-item {
		justify-content: flex-start;
		padding: 30upx 0;
		border-bottom: 1upx solid #EDEDED;
		
	}
	.search-item .conte {
		flex: 1;
		font-size: 32upx;
		color: #333;
	}
	.search-item .iconfont {
		font-size: 50upx;
		margin-right: 5upx;
	}
	.search-item .icon-sousuo-01 {
		margin-right: 30upx;
	}
	/deep/ .u-loading-icon {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	.search-btn {
		width: 160rpx;
		height: 67rpx;
		background: #232DA7;
		font-size: 32rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 67rpx;
		border-radius: 10rpx;
	}
</style>